<template>
  <div>
    {{brInfoSelect}}
    <Divider>事件登记</Divider>
    事件编号
    <Input class="input"></Input>
    事件名称
    <Input class="input"></Input>
    <Select
      v-model="gmName"
      :transfer="true"
      class="input"
      placeholder="选择柜面负责人"
    >
      <Option value="wangjp@dev.bosc" key="1">王金鹏</Option>
      <Option value="xiahn@dev.bosc" key="2">夏浩男</Option>
      <Option value="liuqian2@bosc.cn" key="3">刘乾</Option>
    </Select>
    <Button type="primary" class="btn">事件登记</Button>
    <Divider>事件维护</Divider>
    事件编号
    <Input class="input"></Input>
    事件名称
    <Input class="input"></Input>
    <Select
      v-model="gmName"
      :transfer="true"
      class="input"
      placeholder="选择柜面负责人"
    >
      <Option value="wangjp@dev.bosc" key="1">王金鹏</Option>
      <Option value="xiahn@dev.bosc" key="2">夏浩男</Option>
      <Option value="liuqian2@bosc.cn" key="3">刘乾</Option>
    </Select>
    <Select
      v-model="gmName"
      :transfer="true"
      class="input"
      placeholder="事件状态"
    >
      <Option value="wangjp@dev.bosc" key="1">未处理</Option>
      <Option value="xiahn@dev.bosc" key="2">已处理</Option>
      <Option value="liuqian2@bosc.cn" key="3">处理中</Option>
    </Select>
    <DatePicker type="month" placeholder="月度" class="input"></DatePicker>
    <Button type="primary">事件查询</Button>
    <Divider>字段过滤</Divider>
    <CheckboxGroup v-model="brInfoSelect1" size="small" @on-change="change">
      <Checkbox label="事件编号"></Checkbox>
      <Checkbox label="事件名称"></Checkbox>
      <Checkbox label="事件状态"></Checkbox>
      <Checkbox label="一线人员"></Checkbox>
    </CheckboxGroup>
    <Divider>需求信息</Divider>
    <Table border :columns="columns" :data="data">
      <template slot-scope="{ row, index }" slot="id">
        <Input type="text" v-model="editData.id" v-if="editIndex === index" />
        <span v-else>{{ row.id }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="brName">
        <Input
          type="text"
          v-model="editData.brName"
          v-if="editIndex === index"
        />
        <span v-else>{{ row.brName }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="brType">
        <Select
          v-model="editData.brType"
          v-if="editIndex === index"
          :transfer="true"
        >
          <Option value="维护类需求" key="1">维护类需求</Option>
          <Option value="年度预算制" key="2">年度预算制</Option>
          <Option value="项目需求" key="3">项目需求</Option>
          <Option value="事件需求" key="4">事件需求</Option>
        </Select>
        <span v-else>{{ row.brType }}</span>
      </template>
      <!-- 业务部门 -->
      <template slot-scope="{ row, index }" slot="ywBranch">
        <Input
          type="text"
          v-model="editData.ywBranch"
          v-if="editIndex === index"
        />
        <span v-else>{{ row.ywBranch }}</span>
      </template>
      <!-- 业务负责任人 -->
      <template slot-scope="{ row, index }" slot="ywName">
        <Input
          type="text"
          v-model="editData.ywName"
          v-if="editIndex === index"
        />
        <span v-else>{{ row.ywName }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="kjName">
        <Select
          v-model="editData.kjName"
          v-if="editIndex === index"
          :transfer="true"
        >
          <Option value="奚秋月" key="1">奚秋月</Option>
          <Option value="王金鹏" key="2">王金鹏</Option>
          <Option value="陈小忠" key="3">陈小忠</Option>
          <Option value="郭蓓" key="5">郭蓓</Option>
          <Option value="夏浩男" key="6">夏浩男</Option>
          <Option value="刘乾" key="7">刘乾</Option>
        </Select>
        <span v-else>{{ row.kjName }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="actions">
        <div v-if="editIndex === index">
          <Button @click="handleSave(index)">保存</Button>
          <Button @click="editIndex = -1">取消</Button>
        </div>
        <div v-else>
          <Button @click="handleEdit(row, index)">操作</Button>
        </div>
      </template>
    </Table>
  </div>
</template>
<script>
// 表格增加列  先brInfoSelect增加列名，在column配置对应列名的英文ID，在template配置对应的ID，同时增加CheckboxGroup中的选项
export default {
  data() {
    return {
      br: {},
      oldData: "",
      gmName:"",
      brInfoSelect1: [],
      brInfoSelect: {
        事件编号: 1,
        事件名称: 1,
        事件状态: 1,
        一线人员: 1,
        二线人员: 1,
        开发人员: 1,
        处理方式: 1,
        主要原因: 1,
        到达日期: 1,
        方案确定日期: 1,
        处理过程: 1,
        变更号: 1,
        问题描述: 1,
        具体原因: 1,
      },
      editIndex: -1, // 当前聚焦的输入框的行数
      editData: {},
      data: [
        {
          id: "X20200902000009",
          brName: "关于校验汇兑凭证号码的业务需求书",
          brType: "维护类需求",
          ywBranch: "运营管理部",
          kjName: "",
        },
        {
          id: "X20200902000010",
          brName: "关于校验汇兑凭证号码的业务需求书1",
          brType: "维护类需求1",
          ywBranch: "运营管理部1",
          kjName: "",
        },
      ],
      column: {
        需求编号: "id",
        需求名称: "brName",
        需求类型: "brType",
        业务部门: "ywBranch",
        业务负责人: "ywName",
        科技负责人: "kjName",
        柜面牵头: "gmFlag",
        柜面负责人: "gmName",
        分配厂商: "csBranch",
        开发人员: "csName",
        测试经理: "testBranch",
        测试人员: "testName",
        购物车: "gwcFlag",
        无纸化: "wzhFlag",
        电子印章: "dzyzFlag",
        无纸化: "wzhFlag",
        TWS: "twsFlag",
        GTP: "gtpFlag",
        定时任务: "timmerFlag",
        SQL: "sqlFlag",
        涉及系统: "otherBranch",
        工作量: "workCount",
        当前进度: "process",
        计划投产时间: "planTime",
        实际投产时间: "realTime",
      },
    };
  },
  methods: {
    handleEdit(row, index) {
      for (var item in this.data[index]) {
        this.editData[item] = this.data[index][item];
      }
      this.editIndex = index;
    },
    handleSave(index) {
      for (var item in this.editData) {
        this.data[index][item] = this.editData[item];
      }
      // TODO 更新数据库
      this.editIndex = -1;
    },
    handleCancle(index) {
      this.editIndex = -1;
    },
    change(res){
      console.log(res)
      for(var i in res){
        if(this.brInfoSelect[res[i]]===0){
          this.brInfoSelect[res[i]]=1
        }else{
          this.brInfoSelect[res[i]]=0
        }
      }
    }
  },
  computed: {
    columns() {
      // 读取选项，组合表格选项
      var res = [];

      for (var i in this.brInfoSelect) {
        if (this.brInfoSelect[i] === 1) {
          res.push({
            title: i,
            slot: this.column[i],
          });
        }
      }
      // console.log(res);
      res.push({
        title: "操作",
        slot: "actions",
      });
      return res;
    },
  },
};
</script>
<style scoped>
.input {
  width: 8%;
  margin-left: 10px;
  margin-right: 10px;
}
.btn {
  width: 120px;
  margin: 10px;
}
</style>